<html>
<head>
<title>led</title>
<script type="text/javascript"
	src="static/plugins/jquery/jquery-1.8.3.min.js"></script>
<style>
body {
	background-color: #FFEAD0;
	padding: 0 0;
	margin: 0 0;
	overflow:hidden;
}

div#bg {
	overflow:hidden;
	width: 100%;
	height: 100%;
	background: url(webpages/wx/led/images/bg2.jpg) top center no-repeat;
/* 	padding: 10px 10px; */
}

.star-red {
	background-image: url(webpages/wx/led/images/red4.png);
	background-repeat: no-repeat;
	width: 16px;
	height: 16px;
	position: absolute;
	overflow: hidden;
	float:left;
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
	left: 635px;
    top: 100px;
}
/* 691=683+8  180   、、675=683-8
683   预留80  右侧-8-40  左侧+8+40*/
.star-yellow {
	background-image: url(webpages/wx/led/images/red5.png);
	background-repeat: no-repeat;
	width: 32px;
	height: 32px;
	position: absolute;
	overflow: hidden;
	float:right;
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
	left: 715px;
    top: 100px;
    /***/
    -webkit-animation-name: fadeInOut;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 4.5s;
    -webkit-animation-direction: 4.5s;
    animation-iteration-count:infinite;
	-webkit-animation-iteration-count:infinite; 
	animation-delay:0s;
}


@-webkit-keyframes fadeInOut {
    0% {
        opacity:1;
     }
    10% {
        opacity:0.3;
    }
    30% {
        opacity:0.5;
    }
    50% {
        opacity: 0.8;    
    }
    70% {
        opacity:0.5;
    }
    90% {
        opacity:0.3;
    }
    100% {
        opacity:1;
    }
}
.anim_fade_image {
    position:absolute;    
    -webkit-animation-name: fadeInOut;
    -webkit-animation-timing-function: ease-in-out;
/*     -webkit-animation-iteration-count: infinite; */
    -webkit-animation-duration: 7s;
    -webkit-animation-direction: alternate;
    animation-iteration-count:1;
	-webkit-animation-iteration-count:1; 
	animation-delay:3s;
}
</style>
</head>
<body>
	<div id="bg">
<!-- 		<div class="star-red"></div> -->
<!-- 		<div class="star-yellow"></div> -->
	</div>
</body>
<script type="text/javascript">
var width = $(document.body).width();
var height = $(document.body).height();
var centerX = width/2 -8;
var centerY = 180;
var beginX = centerX-80/2; //预留80放头像
var startCount = ${count!0};
var signCount = ${signCount!0};
var indexSign = signCount;
$(function() {
	console.log($(document.body).width());
	console.log($(document.body).height());
	
// 	$('#bg').append('<div class="star-red"></div>');
	//设置背景那个大小
// 	$('#bg').css("background","url(webpages/wx/led/images/bg.jpg) top center no-repeat");
// 	$('#bg').css("width",width);
// 	$('#bg').css("height",height);
	for ( var i = 1; i <= startCount; i++) {
		if(i<=signCount) {
			showYellowStar(i);
		}
	}
});
var flag = 'right';
function showYellowStar(i) {
	$('#bg').append('<div class="star-yellow" id="star'+i+'"></div>');
	var w1 = (width/2)-120;
	var wd = 0;
	if(flag=='right') {
		w1 = (width/2)-120;
		wd = RandomNumBoth(32,w1);
		flag = 'left';
	} else if(flag=='left'){
		w1 = (width/2)+140;
		wd = RandomNumBoth(w1,width-32);
		flag = 'right';
	}
	var topH = 240;
	if((wd<width/4)|| (wd>width*3/4)) {
		topH = 480;
	}
	 $("#star"+i).css("left",wd+"px");
	 $("#star"+i).css("top",RandomNumBoth(0,topH)+"px");
	 var rotate = RandomNumBoth(0,360);
	 $("#star"+i).css("-webkit-transform","rotate("+rotate+"deg)");
	 $("#star"+i).css("transform","rotate("+rotate+"deg)");
	 //闪烁周期
	 var time = RandomNumBoth(1,5);
	 $("#star"+i).css("animation-duration",time+"s");
	 $("#star"+i).css("-webkit-animation-duration",time+"s");
}
//显示红色星星
function showRedStar(i) {
	if(!$("#star"+i)) {
		$('#bg').append('<div class="star-red" id="star'+i+'"></div>');
		 $("#star"+i).css("left",RandomNumBoth(0,centerX)+"px");
		 $("#star"+i).css("top",RandomNumBoth(0,180)+"px");
		 var rotate = RandomNumBoth(0,360);
		 $("#star"+i).css("-webkit-transform","rotate("+rotate+"deg)");
		 $("#star"+i).css("transform","rotate("+rotate+"deg)");
	} else {
		$("#star"+i).removeClass("star-yellow"); 
		$("#star"+i).addClass("star-red"); 
	}
}
var timestamp = Date.parse(new Date());
setInterval('getSignInfo()',6000);

function getSignInfo() {
// 	$.get("getWxSignInfo.action", function(result){
// 		var array = result.obj;
// 		console.log(array);
// 		if(array&&array.length>0) {
// 			for(var item in array) {
// 				console.log(item);
// 				showImg(item.headImgUrl);
// 				showRedStar(++indexSign);
// 			}
// 		}
	   
// 	});
	
	$.post('getWxSignInfo.action',{timestamp:timestamp},function(result){
		var array = result.obj;
		console.log(array);
		if(array&&array.length>0) {
			for(var item in array) {
				showImg(array[item].headImgUrl);
				//首次签到才计算星星
				if(array[item].flag=="0") {
					showYellowStar(++indexSign);
				}
			}
		}
    },'json');
}
var flag1 = "left";
//弹出头像
function showImg(imgUrl) {
	var index = RandomNumBoth(0,1000000);
	var imgId = "img"+index;
	
	var w1 = (width/2)-120;
	var wd = 0;
	if(flag=='right') {
		w1 = (width/2)-120;
		wd = RandomNumBoth(80,w1);
		flag1 = 'left';
	} else if(flag=='left'){
		w1 = (width/2)+140;
		wd = RandomNumBoth(w1,width-80);
		flag1 = 'right';
	}
	$('#bg').append('<img id="'+imgId+'" src="'+imgUrl+'" width="80"/>');
	$("#"+imgId).css("position","absolute");
	$("#"+imgId).css("left",wd);
	$("#"+imgId).css("top",RandomNumBoth(40,150));
	$("#"+imgId).css("border-radius","50%");
	$("#"+imgId).fadeOut(5000);
}


function RandomNumBoth(Min,Max){
    var Range = Max - Min;
    var Rand = Math.random();
    var num = Min + Math.round(Rand * Range); //四舍五入
    return num;
}
</script>
</html>